<template>
    <div class="nav" id="topNav">
        <div class="con">
            <div v-show="logoShow" class="left">
                <img
                    src="~/assets/images/logo.png"
                    alt="小竹财税logo"
                    @click="go('/service')"
                />
            </div>

            <div v-show="backShow" class="backPath" @click="backPath">
                <i class="el-icon-arrow-left"></i>
                返回商家中心
            </div>

            <div v-show="pathNameShow" class="path-name">
                <div class="line"></div>
                {{ pathName }}
            </div>

            <div
                v-if="menuShow"
                style="display: flex; align-items: center; width: 100%"
            >
                <div class="position">
                    <i class="el-icon-location"></i>
                    合肥
                </div>
                <div class="menu">
                    <el-menu
                        :default-active="menuIndex"
                        background-color="transparent"
                        class="el-menu-demo"
                        active-text-color="#1C87F3"
                        text-color="#333333"
                        mode="horizontal"
                        @select="handleSelect"
                    >
                        <el-menu-item index="0">
                            <nuxt-link to="/"> 首页 </nuxt-link>
                        </el-menu-item>
                        <el-menu-item index="0">
                            <nuxt-link to="/chatgpt/xzcsgpt" target="_blank"
                                >财税AI</nuxt-link
                            >
                        </el-menu-item>
                        <template v-for="item in menuList">
                            <template v-if="item.list.length == 0">
                                <el-menu-item
                                    :key="item.index"
                                    :index="item.index"
                                >
                                    <nuxt-link
                                        v-if="item.name !== '风险检测'"
                                        :to="item.path"
                                    >
                                        {{ item.name }}
                                    </nuxt-link>
                                    <span v-else @click="LookAlert">
                                        {{ item.name }}
                                    </span>
                                </el-menu-item>
                            </template>
                            <template v-else>
                                <el-submenu
                                    :key="item.index"
                                    :index="item.index"
                                >
                                    <template slot="title">
                                        <span
                                            style="
                                                position: relative;
                                                top: -2px;
                                            "
                                            @click="menuItemClick(item)"
                                        >
                                            <nuxt-link
                                                :style="{
                                                    color:
                                                        menuIndex == item.index
                                                            ? 'rgb(28, 135, 243)'
                                                            : '',
                                                }"
                                                :to="item.path"
                                            >
                                                {{ item.name }}
                                            </nuxt-link>
                                        </span>
                                    </template>
                                    <el-menu-item
                                        v-for="itx in item.list"
                                        :key="itx.index"
                                        :index="itx.index"
                                    >
                                        <nuxt-link
                                            :to="{
                                                name: itx.path,
                                                params: itx.params,
                                                query: itx.query,
                                            }"
                                        >
                                            {{ itx.name }}
                                        </nuxt-link>
                                    </el-menu-item>
                                </el-submenu>
                            </template>
                        </template>
                    </el-menu>
                </div>
            </div>

            <div class="right" style="min-width: 170px">
                <div class="nav-item" style="margin-left: 0">
                    <el-popover
                        placement="bottom"
                        width="365"
                        :offset="0"
                        trigger="hover"
                    >
                        <div slot="reference" v-show="userInfo == null">
                            <span class="dl" @click="showLoginTabs(true, 0)"
                                >登录</span
                            >
                            /
                            <span class="zc" @click="showLoginTabs(true, 2)"
                                >注册</span
                            >
                        </div>
                        <div class="no-login-popover">
                            <div class="no-login-title">登录后你可以</div>
                            <div class="no-login-list">
                                <div class="no-login-item">
                                    <img
                                        src="~/assets/images/userCenter/nav-no-login-1.png"
                                        alt=""
                                    />
                                    免费查阅法规库
                                </div>
                                <div class="no-login-item">
                                    <img
                                        src="~/assets/images/userCenter/nav-no-login-2.png"
                                        alt=""
                                    />
                                    在线向专家提问
                                </div>
                                <div class="no-login-item">
                                    <img
                                        src="~/assets/images/userCenter/nav-no-login-3.png"
                                        alt=""
                                    />
                                    免费看高清视频
                                </div>
                                <div class="no-login-item">
                                    <img
                                        src="~/assets/images/userCenter/nav-no-login-4.png"
                                        alt=""
                                    />
                                    免费获取模板资料
                                </div>
                            </div>
                            <el-button
                                class="no-login-but"
                                type="primary"
                                round
                                @click="go('/login')"
                            >
                                立即登录
                            </el-button>
                            <div class="no-login-text">
                                新用户注册送会员
                                <span @click="go('/login')">点我注册</span>
                            </div>
                        </div>
                    </el-popover>

                    <div
                        v-if="userInfo"
                        class="bilibili-user-popover"
                        @mouseenter="mouseEnterEvent"
                        @mouseleave="mouseLeaveEvent"
                    >
                        <img
                            :src="userInfo.avatar"
                            class="avatar"
                            :class="{ 'avatar-active': userPopoverShow }"
                            alt=""
                            @click="go('/user/myset')"
                        />
                        <transition name="el-fade-in-linear">
                            <div
                                class="bilibili-user-con"
                                v-show="userPopoverShow"
                                @click="mouseLeaveEvent"
                            >
                                <div class="user-con-name">
                                    {{ userInfo.nickname }}
                                </div>

                                <div
                                    v-show="
                                        userInfo &&
                                        (userInfo.is_gpt_vip != 0 ||
                                            userInfo.is_99vip == 1)
                                    "
                                    class="user-con-vip-wenda"
                                    to="/user/myvip"
                                    @click="set_payVipShow(true)"
                                >
                                    <!-- <template v-if="userInfo.is_99vip == 1">
                                        99VIP会员
                                    </template>
                                    <template
                                        v-else-if="userInfo.is_gpt_vip == 1"
                                    >
                                        一天会员
                                    </template>
                                    <template
                                        v-else-if="userInfo.is_gpt_vip == 2"
                                    >
                                        月度会员
                                    </template>
                                    <template
                                        v-else-if="userInfo.is_gpt_vip == 3"
                                    >
                                        年度会员
                                    </template> -->
                                    <img
                                        src="~/assets/images/userCenter/vip_two_to_one.png"
                                        class="vip_two_to_one"
                                        alt=""
                                    />
                                </div>
                                <div class="user-con-grid">
                                    <nuxt-link
                                        to="/user/myquiz"
                                        class="user-con-grid-item"
                                    >
                                        {{ userInfo.quiznum }}
                                        <div>提问</div>
                                    </nuxt-link>
                                    <nuxt-link
                                        to="/user/myanswer"
                                        class="user-con-grid-item"
                                    >
                                        {{ userInfo.answernum }}
                                        <div>回答</div>
                                    </nuxt-link>
                                    <nuxt-link
                                        to="/user/myfansfollows"
                                        class="user-con-grid-item"
                                    >
                                        {{ userInfo.follow_count }}
                                        <div>关注</div>
                                    </nuxt-link>
                                </div>
                                <div
                                    to="/user/myvip"
                                    class="user-con-vip-link"
                                    @click="set_payVipShow(true)"
                                >
                                    <div class="vip-left">
                                        会员中心
                                        <div>{{ getVipType }}</div>
                                    </div>
                                    <div class="vip-right">点击查看</div>
                                </div>
                                <div class="user-con-links">
                                    <nuxt-link
                                        to="/user/myset"
                                        class="user-con-link-item"
                                    >
                                        <img
                                            src="~/assets/images/userCenter/my-user.png"
                                            alt=""
                                        />
                                        <div>个人中心</div>
                                        <i class="el-icon-arrow-right"></i>
                                    </nuxt-link>
                                    <nuxt-link
                                        to="/user/myquiz"
                                        class="user-con-link-item"
                                    >
                                        <img
                                            src="~/assets/images/userCenter/my-qa.png"
                                            alt=""
                                        />
                                        <div>问答中心</div>
                                        <i class="el-icon-arrow-right"></i>
                                    </nuxt-link>
                                    <nuxt-link
                                        to="/user/myserviceorder"
                                        class="user-con-link-item"
                                    >
                                        <img
                                            src="~/assets/images/userCenter/my-qfzx.png"
                                            alt=""
                                        />
                                        <div>企服中心</div>
                                        <i class="el-icon-arrow-right"></i>
                                    </nuxt-link>
                                </div>
                                <div class="user-con-line"></div>
                                <div class="user-con-links">
                                    <div
                                        class="user-con-link-item"
                                        @click="menuCommand('logout')"
                                    >
                                        <img
                                            src="~/assets/images/userCenter/my-logout.png"
                                            alt=""
                                        />
                                        <div>退出登录</div>
                                    </div>
                                </div>
                            </div>
                        </transition>
                    </div>
                </div>

                <el-popover
                    v-if="userInfo"
                    placement="bottom"
                    width="140"
                    trigger="hover"
                    @after-enter="getmessage_count"
                    @after-leave="getmessage_count"
                >
                    <div class="news-list">
                        <nuxt-link to="/mynews/collectask" class="new-item">
                            我的问答
                            <div
                                v-show="messageCount.wendahuifu > 0"
                                class="new-item-badge"
                            >
                                {{
                                    messageCount.wendahuifu > 99
                                        ? "99+"
                                        : messageCount.wendahuifu
                                }}
                            </div>
                        </nuxt-link>
                        <nuxt-link to="/MyNews/like" class="new-item">
                            收到评论
                            <div
                                v-show="messageCount.comment > 0"
                                class="new-item-badge"
                            >
                                {{
                                    messageCount.comment > 99
                                        ? "99+"
                                        : messageCount.comment
                                }}
                            </div>
                        </nuxt-link>
                        <nuxt-link to="/MyNews/like" class="new-item">
                            收到的赞
                            <div
                                v-show="messageCount.like > 0"
                                class="new-item-badge"
                            >
                                {{
                                    messageCount.like > 99
                                        ? "99+"
                                        : messageCount.like
                                }}
                            </div>
                        </nuxt-link>
                        <nuxt-link to="/MyNews/system" class="new-item">
                            系统消息
                            <div
                                v-show="messageCount.message > 0"
                                class="new-item-badge"
                            >
                                {{
                                    messageCount.message > 99
                                        ? "99+"
                                        : messageCount.message
                                }}
                            </div>
                        </nuxt-link>
                    </div>
                    <nuxt-link
                        slot="reference"
                        to="/mynews/collectask"
                        class="nav-item"
                        rel="nofollow"
                    >
                        <div>消息</div>
                        <div v-if="sumCount > 0" class="badge">
                            {{ sumCount }}
                        </div>
                    </nuxt-link>
                </el-popover>
            </div>
        </div>

        <!-- 登录 -->
        <el-dialog
            title=" "
            :visible.sync="loginShow"
            width="322px"
            :before-close="closeLogin"
            :show-close="false"
            :close-on-click-modal="true"
        >
            <div
                v-show="loginType == 'web'"
                class="switch-logintype"
                @click="getAppletCode"
            >
                <img class="text" :src="switch_type_wx2" alt="" />
                <img class="login-img" :src="switch_type_wx" alt="" />
            </div>
            <div
                v-show="loginType == 'wx'"
                class="switch-logintype"
                @click="
                    loginType = 'web';
                    clearWeChatTime();
                "
            >
                <img class="text" :src="switch_type_web2" alt="" />
                <img class="login-img" :src="switch_type_web" alt="" />
            </div>
            <template v-if="loginType == 'web'">
                <div v-if="tabsIndex == 0 || tabsIndex == 1" class="top-tabs">
                    <div
                        class="tab"
                        :class="{ 'tab-s': tabsIndex == 0 }"
                        @click="tabsIndex = 0"
                    >
                        快捷登录
                    </div>
                    <div
                        class="tab"
                        :class="{ 'tab-s': tabsIndex == 1 }"
                        @click="tabsIndex = 1"
                    >
                        密码登录
                    </div>
                </div>

                <div
                    v-if="tabsIndex == 2 || tabsIndex == 3"
                    class="login-title"
                >
                    {{ tabsIndex == 2 ? "注册小竹账户" : "找回密码" }}
                </div>

                <div class="form">
                    <el-form
                        :model="loginForm"
                        :rules="loginRules"
                        ref="loginForm"
                        label-width="0"
                        class="demo-ruleForm"
                    >
                        <el-form-item label="" prop="mobile">
                            <el-input
                                v-model="loginForm.mobile"
                                placeholder="请输入手机号"
                            ></el-input>
                        </el-form-item>
                        <el-form-item
                            v-if="
                                tabsIndex == 0 ||
                                tabsIndex == 2 ||
                                tabsIndex == 3
                            "
                            label=""
                            prop="code"
                        >
                            <el-input
                                v-model="loginForm.code"
                                placeholder="请输入短信验证码"
                            >
                                <el-button slot="append" @click="isGetCode">
                                    {{ codeTest }}
                                </el-button>
                            </el-input>
                        </el-form-item>
                        <el-form-item
                            v-if="tabsIndex == 1 || tabsIndex == 2"
                            label=""
                            prop="password"
                        >
                            <el-input
                                v-model="loginForm.password"
                                show-password
                                placeholder="请输入密码"
                            ></el-input>
                        </el-form-item>

                        <el-form-item
                            v-if="tabsIndex == 3"
                            label=""
                            prop="passwordNew"
                        >
                            <el-input
                                v-model="loginForm.passwordNew"
                                show-password
                                placeholder="设置新密码"
                            ></el-input>
                        </el-form-item>
                        <el-form-item
                            v-if="tabsIndex == 3"
                            label=""
                            prop="passwordNew2"
                        >
                            <el-input
                                v-model="loginForm.passwordNew2"
                                show-password
                                placeholder="再次确认新密码"
                            ></el-input>
                        </el-form-item>

                        <el-form-item
                            v-if="tabsIndex == 2"
                            label=""
                            prop="agree"
                        >
                            <el-checkbox
                                v-model="loginForm.agree"
                                true-label="1"
                                false-label="0"
                            >
                                <span class="agree">
                                    我已同意
                                    <span @click.stop="goxieyi(1)"
                                        >《小竹用户协议》</span
                                    >和<span @click.stop="goxieyi(2)"
                                        >《用户隐私政策》</span
                                    >
                                </span>
                            </el-checkbox>
                        </el-form-item>

                        <el-form-item>
                            <el-button
                                style="width: 100%"
                                type="primary"
                                @click="clickSubmit()"
                            >
                                <template v-if="tabsIndex == 2">
                                    注册
                                </template>
                                <template v-else-if="tabsIndex == 3">
                                    确定更改
                                </template>
                                <template v-else> 登录 </template>
                            </el-button>
                        </el-form-item>
                    </el-form>
                </div>

                <div v-if="tabsIndex == 0" class="qita">
                    没有账号？ <span @click="tabsIndex = 2">立即注册</span>
                </div>
                <div
                    v-if="tabsIndex == 1"
                    class="qita"
                    style="display: flex; justify-content: space-between"
                >
                    <div>
                        没有账号？ <span @click="tabsIndex = 2">立即注册</span>
                    </div>
                    <div style="cursor: pointer" @click="tabsIndex = 3">
                        忘记密码
                    </div>
                </div>
                <div v-if="tabsIndex == 2 || tabsIndex == 3" class="qita">
                    已有账号？ <span @click="tabsIndex = 0">立即登录</span>
                </div>
            </template>
            <template v-if="loginType == 'wx'">
                <div class="login-wx-title">微信扫码登录</div>
                <div
                    v-loading="wechatloading"
                    element-loading-text="拼命生成二维码中"
                    class="login-wx-img"
                >
                    <img v-if="wxcode" :src="wxcode" alt="" />
                    <div v-show="wechatCodeExpire" class="expire">
                        <div style="text-align: center; padding-bottom: 6px">
                            二维码已过期
                        </div>

                        <el-button
                            class="expire-button"
                            type="primary"
                            size="mini"
                            @click="getAppletCode"
                        >
                            刷新
                        </el-button>
                    </div>
                </div>
                <div class="login-wx-tip">
                    <i class="el-icon-info"></i>
                    未注册的用户，只需使用微信进行扫码即可注册
                </div>
            </template>
        </el-dialog>
        <!-- 登录 end -->

        <Vcode
            v-if="isMounted"
            :show="vcodeShow"
            @success="getCode"
            @close="close"
        />
    </div>
</template>

<script>
import {
    pcRegister,
    smsSend,
    userMobilelogin,
    userLogin,
    userChangepwd,
    logout,
    addonsnoticeapiindex,
    new_signlist,
    new_sign,
    getAppletCode,
    check_appletcache,
    make_ticket,
} from "@/assets/api/indexApi";

import { getmessage_count } from "@/assets/api/userCenterApi";

import { mapState, mapMutations, mapActions } from "vuex";

import newsPopover from "@/components/nav/newsPopover.vue";

import switch_type_wx from "@/assets/images/index/switch_type_wx.png";
import switch_type_wx2 from "@/assets/images/index/switch_type_wx2.png";
import switch_type_web from "@/assets/images/index/switch_login_web.png";
import switch_type_web2 from "@/assets/images/index/switch_login_web2.png";

// import Vcode from 'vue-puzzle-vcode'
var clickSwitch = true;

function getMunuListIndex(e) {
    if (e == null) return 0;
    let menuIndex = parseInt(e);
    if (menuIndex >= 10) {
        return Math.trunc(menuIndex / 10) - 1;
    } else {
        return menuIndex - 1;
    }
}

var checkMobile = (rule, value, callback) => {
    if (!value) {
        return callback(new Error("请输入手机号"));
    }
    // var reg = /^((13[0-9])|(14[5|7])|(15([0-3]|[5-9]))|(18[0,5-9]))\d{8}$/;
    var reg = /^1[3456789]\d{9}$/;
    if (!reg.test(value)) {
        return callback(new Error("手机号码有误"));
    } else {
        return callback();
    }
};

var checkAgree = (rule, value, callback) => {
    if (value == "0") {
        return callback(new Error("请同意《小竹用户协议》和《用户隐私政策》"));
    } else {
        return callback();
    }
};

var checkPasswordNew2 = (rule, value, callback) => {
    if (!value) {
        return callback(new Error("再次确认新密码"));
    }
    if (value != this.loginForm.passwordNew) {
        return callback(new Error("两次密码不一致"));
    } else return callback();
};

export default {
    name: "myNav",
    props: ["lists"],
    components: {
        // Vcode,
        newsPopover,
    },
    data() {
        return {
            nameColr: false,
            appShow: false,

            codeTest: "获取验证码",

            // 当前登录弹窗状态
            tabsIndex: 0, // 0 快捷登录 1 密码登录 2 注册账户 3 找回密码
            vcodeShow: false,

            // 登录数据
            loginForm: {
                mobile: null,
                code: "",
                password: "",
                agree: "0",
                passwordNew: "",
                passwordNew2: "",
            },
            loginRules: {
                password: [
                    { required: true, message: "请输入密码", trigger: "blur" },
                ],
                passwordNew: [
                    { required: true, message: "请输入密码", trigger: "blur" },
                ],
                passwordNew2: [
                    { validator: checkPasswordNew2, trigger: "blur" },
                ],
                code: [
                    {
                        required: true,
                        message: "请输入短信验证码",
                        trigger: "blur",
                    },
                ],
                mobile: [{ validator: checkMobile, trigger: "blur" }],
                agree: [{ validator: checkAgree, trigger: "blur" }],
            },

            signShow: false,
            signList: [],
            signData: {
                continue_day: 0,
                is_sign: "0",
                signlist: {
                    content: "",
                    list: [],
                    rule: "",
                    type: 1,
                },
            },

            loginType: "web",
            switch_type_wx: switch_type_wx,
            switch_type_wx2: switch_type_wx2,
            switch_type_web: switch_type_web,
            switch_type_web2: switch_type_web2,
            wxcode: "",
            ticket: "",
            wechatloading: false,
            wechatCheck: null,
            wechatCodeExpire: false,
            wechatCodeTime: 0,

            pathName: "",

            userPopoverShow: false,
            PopoverTime: null,

            isMounted: false,
        };
    },
    computed: {
        ...mapState("common", {
            loginShow: (state) => state.loginShow,
            userInfo: (state) => state.userInfo,
            messageCount: (state) => state.messageCount,
            menuIndex: (state) => state.menuIndex,
            menuList: (state) => state.menuList,
            goeasyObj: (state) => state.goeasyObj,
        }),
        sumCount: function () {
            return (
                this.messageCount.wendahuifu +
                this.messageCount.comment +
                this.messageCount.like +
                this.messageCount.message +
                this.messageCount.xx_unread +
                this.messageCount.hd_unread
            );
        },
        menuShow: function () {
            let noShow = [
                "service-productrelease",
                "service-servicecenter-path",
                "service-postdemand",
            ];
            if (this.$route && noShow.indexOf(this.$route.name) != -1) {
                return false;
            }
            return true;
        },
        logoShow: function () {
            let noShow = ["service-productrelease"];
            if (this.$route && noShow.indexOf(this.$route.name) != -1) {
                return false;
            }
            return true;
        },
        backShow: function () {
            let noShow = ["service-productrelease"];
            if (this.$route && noShow.indexOf(this.$route.name) != -1) {
                return true;
            }
            return false;
        },
        pathNameShow: function () {
            let noShow = [
                {
                    routeName: "service-servicecenter-path",
                    name: "商家中心",
                },
                {
                    routeName: "service-postdemand",
                    name: "发布任务",
                },
            ];
            for (let item of noShow) {
                if (item.routeName == this.$route.name) {
                    this.pathName = item.name;
                    return true;
                }
            }
            return false;
        },
        getVipType: function () {
            if (!this.userInfo) return;
            if (this.userInfo.is_99vip == 1) return "永久会员";
            else if (this.userInfo.is_gpt_vip == 0)
                return "您当前未开通任何会员";
            else {
                return `${this.userInfo.gpt_vip_end_time_text} 到期`;
            }
        },
    },
    watch: {
        loginShow: function (n, o) {
            if (n && this.loginType == "wx") {
                this.getAppletCode();
            }
        },
    },
    beforeMount() {
        // 只会在浏览器执行
        this.$options.components["Vcode"] = () => import("vue-puzzle-vcode");
    },
    mounted() {
        // let token = localStorage.getItem("token");
        // if (token) {
        //     this.getUserInfo();
        //     this.new_signlist();
        // }

        let codeTime = localStorage.getItem("codeTime");
        if (codeTime && parseInt(codeTime) > 0) {
            this.codeTimeout(parseInt(codeTime));
        }

        this.isMounted = true;
    },
    methods: {
        ...mapMutations("common", [
            "setloginShow",
            "setuserInfo",
            "set_messageCount",
            "setmenuIndex",
            "set_payVipShow",
        ]),
        ...mapActions("common", ["getUserInfo"]),

        // 返回上一页
        backPath() {
            this.$router.go(-1);
        },

        // 鼠标移入0.8s后头像
        mouseEnterEvent() {
            if (this.PopoverTime) clearInterval(this.PopoverTime);

            this.PopoverTime = setInterval(() => {
                this.userPopoverShow = true;
                if (this.PopoverTime) clearInterval(this.PopoverTime);
                this.PopoverTime = null;
            }, 300);
        },

        // 鼠标移出头像
        mouseLeaveEvent() {
            if (this.PopoverTime) clearInterval(this.PopoverTime);
            this.PopoverTime = null;
            this.userPopoverShow = false;
        },

        menuItemClick(item) {
            this.setmenuIndex(item.index);
            // this.$router.push({
            //     path: item.path,
            // });
        },

        handleSelect(e) {
            this.setmenuIndex(e);

            this.getMenuSearchIndex(e);

            // if (e == "0") {
            //     if (this.$route.path != "/service/servicechat")
            //         this.$router.push({ path: "/" });
            //     else this.go2({ path: "/" });
            // } else if (e.length > 1) {
            //     let item = this.menuList[getMunuListIndex(this.menuIndex)].list;
            //     let i = parseInt(this.menuIndex[1]);
            //     if (item[i].path != this.$route.fullPath) {
            //         this.$router.push({
            //             name: item[i].path,
            //             params: item[i].params,
            //             query: item[i].query,
            //         });
            //     }
            // } else if (
            //     this.menuList[getMunuListIndex(this.menuIndex)].path &&
            //     this.$route.fullPath !=
            //         this.menuList[getMunuListIndex(this.menuIndex)].path
            // ) {
            //     if (this.$route.path != "/service/servicechat")
            //         this.$router.push({
            //             path: this.menuList[getMunuListIndex(this.menuIndex)]
            //                 .path,
            //         });
            //     else
            //         this.go2({
            //             path: this.menuList[getMunuListIndex(this.menuIndex)]
            //                 .path,
            //         });
            // }
        },

        getMenuSearchIndex(e) {
            if (e == "0" || e == null) return;
            if (e.length > 2 && e[0] == "4") return;
            else this.menuSearchIndex = e;
        },

        // 获取未读消息
        async getmessage_count() {
            const res = await getmessage_count({});
            if (res.code == 1) {
                this.set_messageCount(res.data);
            }
        },

        // 获取签到信息
        async new_signlist() {
            const res = await new_signlist({});
            if (res.code == 1) {
                if (res.data.signlist) this.signList = res.data.signlist.list;
                this.signData = res.data;
            }
        },

        // 展示签到
        clickSignShow() {
            if (localStorage.getItem("token")) {
                this.signShow = true;
            } else {
                this.$message({
                    message: "请登录",
                    type: "warning",
                });
                this.setloginShow(true);
            }
        },

        // 获取小程序登录二维码
        async getAppletCode() {
            this.loginType = "wx";
            let time = Date.now();
            console.log(time - this.wechatCodeTime);
            if (this.wechatCodeTime && time - this.wechatCodeTime < 60000) {
                if (!this.wechatCheck)
                    this.wechatCheck = setInterval(() => {
                        this.check_appletcache();
                    }, 2000);
                return;
            }
            this.wechatloading = true;
            this.wechatCodeExpire = false;
            const ticket = await make_ticket({});
            if (ticket.code == 1) {
                this.ticket = ticket.data;
                const res = await getAppletCode({
                    ticket: this.ticket,
                });
                this.wxcode = window.URL.createObjectURL(res);
                this.wechatCodeTime = time;
                this.wechatloading = false;

                if (this.wechatCheck) {
                    this.clearWeChatTime();
                }
                this.wechatCheck = setInterval(() => {
                    this.check_appletcache();
                }, 2000);
            } else {
                this.wechatloading = false;
            }
        },

        // 检测二维码票据状态
        async check_appletcache() {
            if (!this.ticket || !this.loginShow) {
                this.clearWeChatTime();
                return;
            }
            const res = await check_appletcache({
                ticket: this.ticket,
            });
            // 二维码过期
            if (res.data && res.data == "10001") {
                this.clearWeChatTime();
                this.wechatCodeExpire = true;
                return;
            }
            if (res.token) {
                localStorage.setItem("token", res.token);
                localStorage.setItem("userInfo", JSON.stringify(res.userinfo));
                this.setuserInfo(res.userinfo);
                this.setloginShow(false);
                this.clearWeChatTime();
                location.reload();
            }
        },

        // 停止计时器
        clearWeChatTime() {
            console.log("停止");
            clearInterval(this.wechatCheck);
            this.wechatCheck = null;
        },

        async new_sign() {
            if (!clickSwitch) return;
            clickSwitch = false;
            const res = await new_sign({
                title:
                    this.signData.signlist.type == 0 ? "普通活动" : "SVIP活动",
                list_id: this.signList[this.signData.continue_day].id,
            });
            if (res.code == 1) {
                this.$message({
                    message: "签到成功",
                    type: "success",
                });
                this.new_signlist();
            }
        },

        getNews() {
            this.$refs.newsPopover.getMessageList();
        },

        //
        menuCommand(e) {
            // 页面跳转
            if (e == "logout") {
                this.$confirm("是否退出登录?", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning",
                }).then(() => {
                    this.logout();
                });
            }
            if (e == "myQuiz") {
                if (this.$route.path != "/service/servicechat")
                    this.$router.push({ name: "myquiz", params: {} });
                else this.go2({ name: "myquiz", params: {} });
            }
            if (e == "myAnswer") {
                if (this.$route.path != "/service/servicechat")
                    this.$router.push({ name: "myanswer", params: {} });
                else this.go2({ name: "myanswer", params: {} });
            }
            if (e == "myBamboo") {
                if (this.$route.path != "/service/servicechat")
                    this.$router.push({ name: "mybamboo", params: {} });
                else this.go2({ name: "mybamboo", params: {} });
            }
            if (e == "myVip") {
                if (this.$route.path != "/service/servicechat")
                    this.$router.push({ name: "myvip", params: {} });
                else this.go2({ name: "myvip", params: {} });
            }
            if (e == "myDownload") {
                if (this.$route.path != "/service/servicechat")
                    this.$router.push({ name: "mydownload", params: {} });
                else this.go2({ name: "mydownload", params: {} });
            }
            if (e == "myorderform") {
                if (this.$route.path != "/service/servicechat")
                    this.$router.push({ name: "myorderform", params: {} });
                else this.go2({ name: "myorderform", params: {} });
            }
            if (e == "myserviceorder") {
                if (this.$route.path != "/service/servicechat")
                    this.$router.push({ name: "myserviceorder", params: {} });
                else this.go2({ name: "myserviceorder", params: {} });
            }
            if (e == "mydemand") {
                if (this.$route.path != "/service/servicechat")
                    this.$router.push({ name: "mydemand", params: {} });
                else this.go2({ name: "mydemand", params: {} });
            }
            if (e == "mycollect") {
                if (this.$route.path != "/service/servicechat")
                    this.$router.push({ name: "mycollect", params: {} });
                else this.go2({ name: "mycollect", params: {} });
            }
            if (e == "mySet") {
                if (this.$route.path != "/service/servicechat")
                    this.$router.push({ name: "myset", params: {} });
                else this.go2({ name: "myset", params: {} });
            }
        },

        // 退出登录
        async logout() {
            const id = this.userInfo.id;
            const res = await logout({});
            this.$message("已退出登录");
            this.setuserInfo(null);
            // localStorage.removeItem("token");
            // localStorage.removeItem("userInfo");
            // localStorage.removeItem("closeServiceOne");
            localStorage.clear();
            this.$router.push({ path: "/" });

            this.goeasyObj.pubsub.unsubscribe({
                channel: id,
                onSuccess: function () {},
                onFailed: function (error) {},
            });
        },

        // 隐藏登录弹窗
        closeLogin(e) {
            this.setloginShow(false);
        },

        // 修改登录弹窗状态
        showLoginTabs(is, index) {
            this.$router.push({
                path: "/login",
                query: {
                    url: window.location.pathname + window.location.search,
                    click: "1",
                },
            });
            return;
            this.setloginShow(is);
            this.tabsIndex = index;
        },

        // 下拉鼠标悬浮事件
        hovercCange(type) {
            this.nameColr = type;
        },

        // 用户协议跳转
        goxieyi(e) {
            if (e == 1) {
                let { href } = this.$router.resolve({
                    path: "/UserAgreement/",
                    query: {
                        index: 0,
                    },
                });
                window.open(href, "_blank");
                // window.open(
                //     "https://api.xiaozhucaishui.com/xieyi/user",
                //     "_blank"
                // );
            } else {
                let { href } = this.$router.resolve({
                    path: "/UserAgreement/",
                    query: {
                        index: 1,
                    },
                });
                window.open(href, "_blank");
                // window.open(
                //     "https://api.xiaozhucaishui.com/xieyi/privacy",
                //     "_blank"
                // );
            }
        },

        // 点击提交登录表单
        clickSubmit() {
            this.$refs.loginForm.validate((valid) => {
                if (valid) {
                    // if (this.tabsIndex == 2) this.vcodeShow = true
                    // // 验证
                    // else this.submitForm()
                    this.submitForm();
                } else {
                    // console.log('error submit!!');
                    return false;
                }
            });
        },

        // 用户点击遮罩层，应该关闭模态框
        close() {
            this.vcodeShow = false;
        },

        isGetCode() {
            // 暂时停用图形验证
            this.vcodeShow = true;
            // this.getCode();
        },

        // 获取验证码
        async getCode() {
            this.vcodeShow = false; // 通过验证后，需要手动隐藏模态框
            if (!this.loginForm.mobile) {
                this.$alert("请输入手机号", "", {
                    confirmButtonText: "确定",
                });
                return;
            }
            var reg = /^1[3456789]\d{9}$/;
            if (!reg.test(this.loginForm.mobile)) {
                this.$alert("手机号码有误", "", {
                    confirmButtonText: "确定",
                });
                return;
            }

            let parems = {
                mobile: this.loginForm.mobile,
            };

            if (this.tabsIndex == 0) parems.event = "mobilelogin";
            else if (this.tabsIndex == 2) parems.event = "register";
            else if (this.tabsIndex == 3) parems.event = "changepwd";

            if (this.codeTest == "获取验证码") {
                this.codeTest = "发送中";
                const res = await smsSend(parems);

                if (res.code == 1) {
                    this.$message({
                        showClose: true,
                        message: res.msg,
                        type: "success",
                    });
                    this.codeTimeout(60);
                } else {
                    this.codeTest = "获取验证码";
                    this.$alert(res.msg, "", {
                        confirmButtonText: "确定",
                    });
                }
            }
        },

        codeTimeout(e) {
            localStorage.setItem("codeTime", e);
            if (e > 0) {
                this.codeTest = e + "s";
                setTimeout(() => {
                    this.codeTimeout(e - 1);
                }, 1000);
            } else {
                this.codeTest = "获取验证码";
            }
        },

        // 提交登录
        async submitForm() {
            // 注册
            if (this.tabsIndex == 2) {
                var res = await pcRegister({
                    mobile: this.loginForm.mobile,
                    captcha: this.loginForm.code,
                    password: this.loginForm.password,
                });
                if (res.code == 1) {
                    this.tabsIndex = 1;
                    this.$message({
                        showClose: true,
                        message: res.msg,
                        type: "success",
                    });
                    return;
                }
            }

            // 登录
            else if (this.tabsIndex == 0 || this.tabsIndex == 1) {
                if (this.tabsIndex == 0)
                    var res = await userMobilelogin({
                        mobile: parseFloat(this.loginForm.mobile),
                        captcha: parseFloat(this.loginForm.code),
                    });
                if (this.tabsIndex == 1)
                    var res = await userLogin({
                        account: parseFloat(this.loginForm.mobile),
                        password: this.loginForm.password,
                    });
                if (res.code == 1) {
                    this.$message({
                        showClose: true,
                        message: res.msg,
                        type: "success",
                    });

                    localStorage.setItem("token", res.data.token);
                    localStorage.setItem(
                        "userInfo",
                        JSON.stringify(res.data.userinfo)
                    );
                    this.setuserInfo(res.data.userinfo);

                    this.setloginShow(false);

                    location.reload();
                } else {
                    // this.$message({
                    //     showClose: true,
                    //     message: res.msg,
                    //     type: "warning",
                    // });
                    return;
                }
            }

            // 忘密码
            else if (this.tabsIndex == 3) {
                var res = await userChangepwd({
                    mobile: parseFloat(this.loginForm.mobile),
                    captcha: parseFloat(this.loginForm.code),
                    newpassword: this.loginForm.passwordNew,
                    newpassword2: this.loginForm.passwordNew,
                });
                if (res.code == 1) {
                    this.tabsIndex = 1;
                    this.$message({
                        showClose: true,
                        message: res.msg,
                        type: "success",
                    });
                    return;
                }
            }
        },

        go(url) {
            if (this.$route.path != "/service/servicechat")
                this.$router.push({
                    path: url,
                });
            else
                this.go2({
                    path: url,
                });
        },

        go2(url) {
            let routeData = this.$router.resolve(url);
            window.open(routeData.href, "_blank");
        },

        goApplySerice() {
            let token = localStorage.getItem("token");
            if (token)
                this.$router.push({
                    path: "/service/applyservice",
                });
            else this.setloginShow(true);
        },

        async testccc() {
            const res = await addonsnoticeapiindex({});
        },

        LookAlert() {
            if (!this.userInfo) {
                this.$confirm("该功能需要登录后使用", "提示", {
                    confirmButtonText: "去登录",
                    cancelButtonText: "再看看",
                })
                    .then(() => {
                        this.$router.push({
                            path: "/login",
                            query: {
                                url: "/riskdetection",
                            },
                        });
                    })
                    .catch(() => {});
                return;
            }
            if (this.userInfo.is_gpt_vip == 0) {
                this.$confirm("该功能仅限会员用户使用", "提示", {
                    confirmButtonText: "成为会员",
                    cancelButtonText: "再看看",
                })
                    .then(() => {
                        this.set_payVipShow(true);
                    })
                    .catch(() => {});
                return;
            }
            this.$router.push({
                path: "/riskdetection",
            });
            return;
            this.$alert("财税风险检测敬请期待", "提示", {
                confirmButtonText: "确定",
            });
        },
    },
};
</script>

<style>
.el-popover {
    min-width: 100px !important;
}
</style>

<style lang="scss" scoped>
@keyframes avatarFadeSmall {
    0% {
        transform: scale(3.4) translate(-0, 8px);
    }

    60% {
        // opacity: 1;
    }
    100% {
        // opacity: 0;
        transform: scale(1) translateY(0) translate(0);
    }
}
@keyframes avatarFadeLarge {
    0% {
        transform: scale(1) translateY(0) translate(0);
    }

    60% {
        // opacity: 1;
    }
    100% {
        // opacity: 0;
        transform: scale(3.4) translate(-0, 8px);
    }
}

::v-deep .el-menu.el-menu--horizontal {
    border-bottom-width: 0;
}
::v-deep em {
    color: #1c87f3 !important;
}
.nav {
    background-color: #f6f6f6;
    height: 70px;
}

.no-login-popover {
    padding: 5px 6px;
    .no-login-title {
        font-size: 14px;
        color: #333333;
    }
    .no-login-list {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        .no-login-item {
            padding-top: 15px;
            display: flex;
            align-items: center;
            width: 50%;
            font-size: 14px;
            color: #333333;
            img {
                width: 22px;
                height: 22px;
                margin-right: 7px;
            }
        }
    }
    .no-login-but {
        width: 100%;
        height: 38px;
        margin-top: 14px;
        display: block;
    }
    .no-login-text {
        font-size: 13px;
        font-family: Source Han Sans, Source Han Sans;
        color: #333333;
        text-align: center;
        padding-top: 14px;
        span {
            padding-left: 5px;
            color: #1c87f3;
            cursor: pointer;
        }
    }
}

.bilibili-user-popover {
    height: 40px;
    display: flex;
    align-items: center;
}

.bilibili-user-con {
    width: 280px;
    background: #ffffff;
    box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    padding-top: 40px;
    padding-bottom: 8px;
    position: absolute;
    z-index: 1000;
    top: 39px;
    right: calc(100% - 140px - 10px);
    overflow: hidden;
    text-align: center;
    > div,
    a {
        padding-top: 8px;
        box-sizing: border-box;
    }
    .user-con-name {
        text-align: center;
        font-size: 16px;
        color: #333333;
        padding-top: 20px;
    }
    .user-con-vip {
        text-align: center;
        display: block;
        box-sizing: border-box;
        img {
            width: 69px;
            height: 20px;
        }
    }
    .user-con-vip-wenda {
        display: inline-block;
        // width: 63px;
        // box-sizing: border-box;
        margin: 0 auto;
        // text-align: center;
        // padding: 4px 6px !important;
        margin-top: 8px;
        // border-radius: 2px;
        // border: 1px solid #fa5151;
        // font-size: 12px;
        // font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
        // color: #fa5151;
        .vip_two_to_one {
            width: 64px;
            height: 20px;
            display: block;
        }
    }
    .user-con-grid {
        display: flex;
        align-items: center;
        justify-content: space-between;

        padding: 10px 25px 0;
        .user-con-grid-item {
            font-size: 16px;
            font-weight: 500;
            color: #333333;
            text-align: center;
            width: 65px;
            display: block;
            box-sizing: border-box;
            div {
                font-size: 12px;
                font-weight: 400;
                color: #9e9e9e;
                padding-top: 5px;
            }
        }
    }
    .user-con-vip-link {
        width: 229px;
        height: 53px;
        background: linear-gradient(90deg, #e1f0ff 0%, #f1f8ff 100%);
        border-radius: 6px;
        margin: 25px auto 8px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-left: 27px;
        padding-right: 11px;
        padding-top: 0;

        a {
            box-sizing: border-box;
            display: block;
        }

        .vip-left {
            font-size: 16px;
            font-weight: 500;
            color: #51a6fc;
            text-align: left;
            div {
                font-size: 12px;
                color: #a0c2e4;
                font-weight: 400;
            }
        }
        .vip-right {
            width: 64px;
            height: 24px;
            line-height: 24px;
            text-align: center;
            color: #5da8f4;
            background: #ffffff;
            border-radius: 4px;
            &:hover {
                color: #5da8f4;
            }
        }
    }

    .user-con-links {
        .user-con-link-item {
            height: 47px;
            display: flex;
            align-items: center;
            padding: 0 20px 0 38px;
            color: #333333;
            font-size: 12px;
            box-sizing: border-box;
            text-align: left;
            img {
                width: 16px;
                height: 16px;
                margin-right: 12px;
            }
            div {
                width: 100%;
            }
            &:hover {
                background: #f9f9f9;
            }
        }
    }

    .user-con-line {
        width: 227px;
        height: 1px;
        background-color: #e7e7e7;
        margin: 13px auto 0;
        padding: 0;
    }
}

.app-code {
    img {
        display: block;
        width: 100px;
        height: 100px;
    }
}

.con {
    width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 70px;

    .left {
        img {
            width: auto;
            height: 33px;
        }
    }

    .right {
        display: flex;
        align-items: center;
        justify-content: flex-end;

        .el-dropdown-link {
            font-size: 12px;
            font-family: Source Han Sans CN-Regular, Source Han Sans CN;
            font-weight: 400;
            color: #333333;

            i {
                padding-left: 3px;
            }
        }

        .nav-item {
            font-family: Source Han Sans CN-Regular, Source Han Sans CN;
            font-size: 12px;
            font-weight: 400;
            color: #333333;
            margin-left: 102px;
            cursor: pointer;
            text-decoration: none;
            position: relative;
            display: flex;

            .avatar {
                width: 25px;
                height: 25px;
                object-fit: cover;
                border-radius: 100%;
                animation: avatarFadeSmall 0.35s both;
                position: relative;
                z-index: 1001;
            }
            .avatar-active {
                animation: avatarFadeLarge 0.35s both;
            }

            &:hover {
                color: #1c87f3;
            }

            .badge {
                position: absolute;
                right: -14px;
                top: -10px;
                padding: 0 4px;
                background: #fa5151;
                border-radius: 50px;
                font-size: 12px;
                color: #ffffff;
            }

            .dl {
                padding-right: 2px;

                &:hover {
                    text-decoration: underline;
                }
            }

            .zc {
                padding-left: 2px;

                &:hover {
                    text-decoration: underline;
                }
            }
        }

        .nav-item-font {
            width: 0;
            height: 0;
            overflow: hidden;
            font-family: ZTGB2312;
        }

        .nav1 {
            img {
                width: 9px;
                height: 13px;
                display: block;
                margin-right: 4px;
            }

            display: flex;
            align-items: center;
        }

        .sign {
            img {
                width: 21px;
                height: 19px;
                display: block;
                margin-right: 6px;
            }

            display: flex;
            align-items: center;
        }
    }
}

.top-tabs {
    display: flex;
    justify-content: center;

    .tab {
        cursor: pointer;
        font-size: 16px;
        color: #666666;
        margin: 0 15px;

        &::after {
            content: "";
            width: 22px;
            height: 4px;
            background: #ffffff;
            display: block;
            margin: 0 auto;
            margin-top: 8px;
        }
    }

    .tab-s {
        font-weight: bold;
        color: #333333;

        &::after {
            background: #1c87f3;
        }
    }
}

.news-list {
    .new-item {
        font-size: 14px;
        color: #666666;
        line-height: 40px;
        padding: 0 10px;
        cursor: pointer;
        position: relative;
        display: block;
        box-sizing: border-box;
        &:hover {
            color: #1c87f3;
        }
        .new-item-badge {
            position: absolute;
            background: #fa5151;
            font-size: 12px;
            font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
            font-weight: 500;
            color: #ffffff;
            height: 18px;
            line-height: 17px;
            border-radius: 18px;
            text-align: center;
            padding: 0 6px;
            top: 10px;
            right: 12px;
        }
    }
}

.form {
    padding-top: 45px;
}

.qita {
    // padding: 16px 0;
    text-align: center;

    span {
        color: #1c87f3;
        text-decoration: underline;
        cursor: pointer;
    }
}

.img-code {
    ::v-deep .el-input-group__append {
        padding: 0 20px;
    }

    .img-code-code {
        width: 74px;
        height: 34px;
        position: relative;
        top: 2px;
    }
}

.agree {
    font-size: 12px;
    color: #999999;

    span {
        color: #333333;

        &:hover {
            text-decoration: underline;
        }
    }
}

.login-title {
    text-align: center;
    font-size: 18px;
    font-weight: 500;
    color: #333333;
}

.mask {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    z-index: 1000;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba($color: #000000, $alpha: 0.4);
    .sign {
        width: 407px;
        height: 546px;
        background: #ffffff;
        border-radius: 16px;
        .sign-top {
            height: 148px;
            background: linear-gradient(-54deg, #6da3fe 0%, #988ef6 100%);
            border-top-right-radius: 16px;
            border-top-left-radius: 16px;
            position: relative;
            .title {
                font-size: 34px;
                font-weight: bold;
                color: #ffffff;
                padding-top: 26px;
                text-align: center;
            }
            .continue-day {
                width: 166px;
                height: 36px;
                background: rgba($color: #ffffff, $alpha: 0.16);
                border-radius: 18px;
                font-size: 16px;
                color: #ffffff;
                text-align: center;
                line-height: 36px;
                margin: 19px auto 0;
            }
            .explain {
                position: absolute;
                width: 20px;
                height: 20px;
                top: 18px;
                right: 19px;
            }
            .sign-close {
                position: absolute;
                font-size: 30px;
                color: #ffffff;
                top: -9px;
                right: -47px;
                cursor: pointer;
            }
        }

        .sign-bottom {
        }
    }
}

.sign-button {
    width: 248px;
    height: 53px;
    border-radius: 27px;
    display: block;
    margin: 0 auto;
    color: #ffffff;
    margin-top: 33px;
    &:hover {
        opacity: 0.8;
    }
    &:active {
        opacity: 1;
    }
}

.sign-bottom-text {
    font-size: 16px;
    font-family: PingFang SC;
    font-weight: 500;
    color: #999999;
    padding-top: 20px;
    text-align: center;
}

.sign-list {
    display: flex;
    align-items: center;
    align-content: space-between;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 7px 23px 0;
    .is-jl {
        .jl {
            background: #ff6257 !important;
        }
        .jl-down {
            border-top: 5px solid #ff6257 !important;
        }
    }
    .sign-item {
        margin: 0 3px;
        text-align: center;
        width: 44px;
        .jl,
        .jl-down {
            position: relative;
            top: 4px;
        }
        .jl {
            margin: 0 auto;
            height: 18px;
            background: #ffffff;
            border-radius: 2px;
            line-height: 18px;
            font-size: 12px;
            font-weight: 500;
            color: #ffffff;
            text-align: center;
            padding: 1px 4px;
            display: inline;
        }

        .jl-down {
            margin: 0 auto;
            border-top: 5px solid transparent;
            border-bottom: 5px solid transparent;
            border-left: 5px solid transparent;
            border-right: 5px solid transparent;
            width: 0;
            height: 0;
        }
        .sign-con {
            margin: 0 auto;
            width: 39px;
            height: 70px;
            background: #f0eff2;
            border-radius: 4px;
            text-align: center;
            box-sizing: border-box;
            padding-top: 5px;
            font-size: 12px;
            font-weight: 500;
            color: #333333;
            img {
                display: block;
                width: 20px;
                height: 20px;
                margin: 0 auto 7px;
            }
        }

        .sign-con-active {
            background: #6ca7fe;
            color: #ffffff;
        }
    }
}

.switch-logintype {
    display: flex;
    align-items: flex-start;
    position: absolute;
    top: 0;
    right: 0;
    .text {
        width: 79px;
        cursor: pointer;
        display: block;
        top: 7px;
        right: -12px;
        position: relative;
    }
    .login-img {
        width: 55px;
        cursor: pointer;
    }
}

.login-wx-title {
    text-align: center;
    font-size: 20px;
    margin: 0 0 10px;
    height: 28px;
    line-height: 28px;
    color: #363636;
    position: relative;
    top: -10px;
}

.login-wx-img {
    text-align: center;
    height: 220px;
    position: relative;
    img {
        width: 220px;
        height: 220px;
    }
    .expire {
        position: absolute;
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        background-color: rgba($color: #ffffff, $alpha: 0.9);
        color: #666666;
        text-align: center;
        padding-top: 88px;
        top: 0;
        left: 0;
    }
}

.login-wx-tip {
    margin-top: 5px;
    color: #aeaeae;
    font-size: 12px;
    text-align: center;
    position: relative;
    top: 12px;
}

::v-deep .el-menu--horizontal > .el-menu-item {
    border-bottom-width: 0 !important;
    font-size: 14px;
    padding: 0px 10px;
    height: 50px !important;
    line-height: 50px !important;
    &:hover {
        color: rgba($color: #1c87f3, $alpha: 0.7) !important;
        // color: #1c87f3 !important;
        // opacity: 0.7;
        background-color: transparent !important;
    }
}

::v-deep .el-submenu__title {
    border-bottom-width: 0 !important;
    font-size: 14px;
    padding: 0px 10px;
    height: 50px !important;
    line-height: 50px !important;
    &:hover {
        color: #1c87f3 !important;
        opacity: 0.7;
        background-color: transparent !important;
    }
}

::v-deep .el-submenu__title {
    border-bottom-width: 0 !important;
    font-size: 14px;
    padding: 0px 10px;
    height: 50px !important;
    line-height: 50px !important;
    &:hover {
        color: #1c87f3 !important;
        opacity: 0.7;
        background-color: transparent !important;
    }
}

.position {
    font-size: 14px;
    color: #333333;
    padding-left: 35px;
    padding-right: 20px;
    line-height: 50px;
    i {
    }
    span {
        cursor: pointer;
        &:hover {
            color: #1c87f3;
        }
    }
}

.backPath {
    font-size: 14px;
    color: #333333;
    line-height: 20px;
    cursor: pointer;
    i {
        padding-left: 5px;
    }
    &:hover {
        opacity: 0.8;
    }
}

.path-name {
    font-size: 20px;
    font-weight: 600;
    color: #333333;
    display: flex;
    align-items: center;
    padding-left: 26px;
    width: 100%;
    .line {
        width: 1px;
        height: 33px;
        background: #d8d8d8;
        margin-right: 26px;
    }
}
</style>
<style lang="scss">
.el-menu--popup {
    min-width: 100px !important;
    text-align: center;
    background-color: hsla(0, 0%, 100%, 0.95) !important;

    .el-menu-item {
        &:hover {
            opacity: 0.7;
            background-color: transparent !important;
            a {
                color: #1c87f3 !important;
            }
        }
    }
}
</style>
